<template>
  <div class="innerBox">
    <div class="box">
      <div class="tableItem" v-for="item in tableList">
        <div class="title">{{ item.user }}</div>
        <!-- <div> -->
        <!-- 每个日期 -->
        <div v-if="label.data && label.data.length" v-for="label in item.data">
          <div class="item" v-for="innerLaber in label.data">
            <div>{{ setTime(innerLaber.date) }}</div>
            <el-collapse accordion>
              <!-- 每个分类 -->
              <el-collapse-item
                class="item1"
                v-for="inner in setClass(innerLaber.information)"
                :key="inner.isClass"
              >
                <template slot="title">
                  <el-divider content-position="left">{{
                    inner.key
                  }}</el-divider>
                </template>
                <!-- 每个标签 -->
                <div class="item2" v-for="itemLabel in inner.info">
                  <div>{{ itemLabel.key }}</div>
                  <div>
                    <span>正确率:</span>
                    <span>{{ itemLabel.exactNumber }}</span>
                    <span>错误率:</span>
                    <span>{{ itemLabel.errorNumber }}</span>
                    <span>标记次数:</span>
                    <span>{{ itemLabel.sum }}</span>
                  </div>
                  <!-- 每个标签 -->
                </div>
              </el-collapse-item>
              <!-- 每个分类 -->
            </el-collapse>
          </div>
        </div>
        <!-- 每个日期 -->

        <!-- 每个周期 -->
        <div v-else v-for="labelOrder in item.data">
          <div class="item">
            <div>第{{ labelOrder.order }}周期</div>

            <el-collapse accordion>
              <!-- 每个分类 -->
              <el-collapse-item
                class="item1"
                v-for="inner in setClass(labelOrder.information)"
                :key="inner.isClass"
              >
                <template slot="title">
                  <el-divider content-position="left">{{
                    inner.key
                  }}</el-divider>
                </template>
                <!-- 每个标签 -->
                <div class="item2" v-for="itemLabel in inner.info">
                  <div>{{ itemLabel.key }}</div>
                  <div>
                    <span>正确率:</span>
                    <span>{{ itemLabel.exactNumber }}</span>
                    <span>错误率:</span>
                    <span>{{ itemLabel.errorNumber }}</span>
                    <span>标记次数:</span>
                    <span>{{ itemLabel.sum }}</span>
                  </div>
                  <!-- 每个标签 -->
                </div>
              </el-collapse-item>
              <!-- 每个分类 -->
            </el-collapse>
            <!-- <div class="item1" v-for="inner in setClass(labelOrder.information)"> -->
            <!-- <el-divider content-position="left">{{ inner.key }}</el-divider> -->
            <!-- 每个标签 -->
            <!-- <div class="item2" v-for="itemLabel in inner.info">
                <div>{{ itemLabel.key }}</div>
                <div>
                  <span>正确率:</span>
                  <span>{{ itemLabel.exactNumber }}</span>
                  <span>错误率:</span>
                  <span>{{ itemLabel.errorNumber }}</span>
                  <span>标记次数:</span>
                  <span>{{ itemLabel.sum }}</span>
                </div>
              </div> -->
            <!-- 每个标签 -->
            <!-- </div> -->
          </div>
        </div>
        <!-- 每个周期 -->
        <echartPc
          :item="item"
          :type="queryParams.type"
          :num="queryParams.frequency"
        ></echartPc>
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="setQeryParams"
      width="500px"
      class="dialogAddTree1"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="elDialogParams">
        <el-form
          :model="queryParams"
          label-width="120px"
          @submit.native.prevent="() => getTableList()"
        >
          <el-form-item label="查询方式">
            <el-radio v-model="queryParams.type" label="1">按天数查询</el-radio>
            <el-radio v-model="queryParams.type" label="2">按次数查询</el-radio>
          </el-form-item>
          <el-form-item label="选择学生" v-if="identity">
            <el-select
              v-model="queryParams.userId"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in userList"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="查询周期(时间)" v-if="queryParams.type == 1">
            <el-input
              style="width: 130px"
              type="number"
              :disabled="queryParams.type == null"
              placeholder="请输入"
              v-model="queryParams.period"
              @keydown.enter="getTableList"
            >
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
          <el-form-item label="查询周期(次)" v-if="queryParams.type == 2">
            <el-input
              style="width: 130px"
              :disabled="queryParams.type == null"
              type="number"
              placeholder="请输入"
              v-model="queryParams.frequency"
              @keydown.enter="getTableList"
            >
              <template slot="append">次</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getTableList">开始查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getPersonalReportsList } from "@/api/studentEnd/analysisOfTheStudents";
import { listUser } from "@/api/system/user";
import { mapGetters } from "vuex";
import echartPc from "../components/echartPc.vue";
import test from "./test.js";
export default {
  components: {
    echartPc,
  },
  data() {
    return {
      tableList: [],
      queryParams: {
        type: null,
        userId: null,
        frequency: null,
        period: null,
      },
      setQeryParams: false,
      userList: [],
      keyIsZk: {},
    };
  },
  computed: {
    ...mapGetters(["screenSize", "permissions", "rolesId", "userId"]),
    identity: function () {
      return !this.rolesId.includes(102);
    },
  },
  mounted() {
    this.tableList = test.data.data;

    if (this.identity) {
      this.getUserList();
    } else {
    }
  },
  methods: {
    changeIsZk(inner) {
      console.log(inner, "5445", this.keyIsZk[inner]);
      this.keyIsZk[inner] = true;
      this.$set(this.keyIsZk, inner, true);
    },
    getTableList() {
      if (this.queryParams.type == 1) {
        if (this.queryParams.frequency) {
          delete this.queryParams.frequency;
        }
      }
      if (this.queryParams.type == 2) {
        if (this.queryParams.period) {
          delete this.queryParams.period;
        }
      }
      if (this.identity) {
        this.queryParams.userId = null;
      } else {
        this.queryParams.userId = this.userId;
      }

      getPersonalReportsList(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.data;
          this.setQeryParams = false;
        }
      });
    },
    getUserList() {
      let obj = {
        pageSize: 999,
        pageNum: 1,
      };
      listUser(obj).then((res) => {
        if (res.code == 200) {
          this.userList = res.rows;
        }
      });
    },
    setClass(val) {
      const groupedData = val.reduce((groups, item) => {
        if (!groups[item.key.split("/")[0]]) {
          groups[item.key.split("/")[0]] = [];
        }
        groups[item.key.split("/")[0]].push(item);
        return groups;
      }, {});
      function deleteKey(test) {
        let arr = JSON.parse(JSON.stringify(test));
        arr.forEach((ele) => {
          let itemArr = ele.key.split("/");
          itemArr.splice(0, 1);
          ele.key = itemArr.join("/");
        });
        return arr;
      }

      let arr = [];
      let key = Object.keys(groupedData);
      key.forEach((ele, index) => {
        let abc = this.generateRandomSixDigitNumber();
        let obj = {
          key: key[index],
          info: deleteKey(groupedData[ele]),
          isClass: abc,
        };
        console.log(abc, "abc");
        // this.$set(this.keyIsZk,abc,false)
        this.keyIsZk[abc] = false;
        console.log(ele, "ele", groupedData[ele]);
        arr.push(obj);
      });
      console.log(arr, "index");

      return arr;
    },
    //调整时间显示
    setTime(time) {
      // 确保传入的参数是 Date 对象
      if (!(time instanceof Date)) {
        time = new Date(time);
      }

      // 获取年、月、日、时、分、秒
      let year = time.getFullYear();
      let month = time.getMonth() + 1; // 月份是从 0 开始的，所以要加 1
      let day = time.getDate();
      let hours = time.getHours();
      let minutes = time.getMinutes();
      let seconds = time.getSeconds();

      // 格式化月份、日期、小时、分钟和秒，确保它们都是两位数
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hours = hours < 10 ? "0" + hours : hours;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      // 组合成所需的格式
      let formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      return formattedDate;
    },

    //生成随机数
    generateRandomSixDigitNumber() {
      if (crypto && crypto.getRandomValues) {
        // 创建一个Uint32Array数组，用于存储生成的随机数
        const array = new Uint32Array(1);
        // 使用crypto.getRandomValues填充数组
        crypto.getRandomValues(array);
        // 将生成的随机数转换为介于0和1之间的浮点数
        const random = array[0] / (0xffffffff + 1);
        // 将浮点数乘以1000000（因为我们需要一个6位数），然后取整
        const sixDigitNumber = Math.floor(random * 1000000);
        return sixDigitNumber.toString().padStart(6, "0"); // 确保数字总是6位，前面用0填充
      } else {
        // 如果crypto不可用，则使用Math.random作为回退方案
        return Math.floor(Math.random() * 900000 + 100000)
          .toString()
          .padStart(6, "0");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.innerBox {
  height: 100%;
  display: flex;

  background-color: #f1f3f8;

  .box {
    flex: 1;
    overflow: auto;

    .tableItem {
      min-height: 150px;
      background-color: white;

      border-radius: 10px;
      margin-bottom: 15px;
      padding: 10px;

      > .title {
        font-size: 20px;
        margin: 0px auto 30px auto;
        text-align: center;
        color: #707070;
      }

      .item {
        // background-color: red;
        margin-bottom: 20px;
        .el-collapse {
          border: 0;
        }

        .item1 {
          margin-bottom: 15px;
          ::v-deep .el-collapse-item__header {
            border-bottom: none;
          }

          ::v-deep .item2 {
            margin-bottom: 15px;

            > div {
              margin: 5px 0;

              > span:nth-of-type(1) {
                color: green;
              }

              > span:nth-of-type(2) {
                padding: 0 8px;
              }

              > span:nth-of-type(3) {
                color: red;
              }

              > span:nth-of-type(4) {
                // color: red;
                padding: 0 8px;
              }
            }
          }
        }
      }
    }
  }
}

.elDialogParams {
  //   height: 500px;
  //   width: 200px;
  min-height: max-content;
  background-color: white;
}

/* 隐藏Element UI输入框类型为number时的上下箭头 */
::v-deep .el-input__inner[type="number"]::-webkit-inner-spin-button,
.el-input__inner[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
